
var timeOut=document.querySelector('.timeOut')
var score=document.querySelector('.score')
var h1=document.querySelector('h1')
var color=document.querySelectorAll('.color')
var word=['红','绿','蓝','黑','黄']
var wordcolorArr=['red','green','blue','black','yellow']
var inp=document.querySelector('input')
var scores=0
var time=10
var timer
var smallArr=[],colorArr=[]


console.log('script timeout', timeOut);
game()
inp.addEventListener('click',function(){
    if(inp.value=='开始游戏'){
        scores=0
        score.innerText=scores
        //添加点击事件
        for(let x=0;x<color.length;x++){
            color[x].addEventListener('click',panduan)
        }
        inp.value='结束游戏'
        time=10
        timeOut.innerText=time
        timer=setInterval(function(){
            if(time==0){
                clearInterval(timer)
                inp.value='开始游戏'
                alert(`游戏结束，分数为${scores}`)
            }else{
                time--
                timeOut.innerText=time
            }
        },1000)
    }
    else{
        for(let y=0;y<color.length;y++){
            color[y].removeEventListener('click',panduan)
        }
        inp.value='开始游戏'
        clearInterval(timer)
        timeOut.innerText=0
        alert(`游戏结束，分数为${scores}`)
    } 
})

function game(){
    smallArr=[]
    //将五个文字打乱重排
    while(smallArr.length<5){
        var num=randNum(0,4)
        if(smallArr.indexOf(word[num])==-1){
            smallArr.push(word[num])
        }   
    }
    //将五个颜色打乱重排
    colorArr=[]
    while(colorArr.length<5){
        var num=randNum(0,4)
        if(colorArr.indexOf(wordcolorArr[num])==-1){
            colorArr.push(wordcolorArr[num])
        }
    }
    //将打乱后的文字和颜色重新显示
    for(var m=0;m<smallArr.length;m++){
        color[m].innerHTML=smallArr[m]
        color[m].style.color=colorArr[m]
    }
    //随机大字的文字与颜色
    h1.innerText=word[randNum(0,4)]
    h1.style.color=wordcolorArr[randNum(0,4)]              
}
function panduan(){
    //获取点击文字对应的颜色
    var index=0   
    for(var n=0;n<word.length;n++){
        if(word[n]==this.innerHTML){
            index=n
            break
        }
    }
    //判断是否点击正确
    if(h1.style.color==wordcolorArr[index]){
        scores++
        // console.log(scores);
        score.innerText=scores
        clearInterval(timer)
        time=10
        timeOut.innerText=time
        timer=setInterval(function(){
            if(time==0){
                clearInterval(timer)
                inp.value='开始游戏'
                alert(`游戏结束，分数为${scores}`)
            }else{
                time--
                timeOut.innerText=time
            }
        },1000)
    }
    else{
        for(let i=0;i<color.length;i++){
            color[i].removeEventListener('click',panduan)
        }
        timeOut.innerText=0
        clearInterval(timer)
        inp.value='开始游戏'
        alert(`游戏结束，分数为${scores}`)
        return
    }
    game()
}